html,body{
    height:100%;margin:0;font-family:sans-serif;
}
#container{
    display:flex;height:100%;
}
h1 {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}

/* 4分割マップ用 */
#map-container {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  flex:1;
  gap:2px;
}
.map-wrapper {
  position:relative;
  border:2px solid #ccc;
  transition:border 0.2s;
}
.map-wrapper.highlight{
    border:3px solid red;
}
.map-wrapper .map{
    width:100%;
    height:100%;
}

/* 座標表示 */
.coords {
  position:absolute;
  bottom:8px;
  left:8px;
  z-index:1000;
  background:rgba(255,255,255,0.7);
  padding:2px 6px;
  font-size:12px;
  border-radius:4px;
}

/* 地図切替セレクト */
.map-select {
  position:absolute;
  top:8px;
  right:8px;
  z-index:1000;
  padding:2px 6px;
  border-radius:4px;
  background:#fff;
  border:1px solid #ccc;
}
@media (max-width: 700px) {
  #map-container.screens-4 .map-select {
    font-size: 10px;
    padding: 1px 3px;
    top: 4px;
    right: 4px;
    max-width: 120px;
  }
}

/* サイドバー */
#sidebar {
  width:0; padding:0; overflow:hidden; 
}
#sidebar.hidden {
  width:220px;
  background:#f4f4f4;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:0.3s;
  box-shadow:2px 0 6px rgba(0,0,0,0.2);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  }

@media (max-width: 700px) {
  #sidebar {
    width:220px;
    background:#f4f4f4;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:0.3s;
    box-shadow:2px 0 6px rgba(0,0,0,0.2);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #sidebar.hidden {
    width:0; padding:0; overflow:hidden;
  }
}

/* サイドバー切替ボタン */
#toggleSidebar {
  position:absolute;
  top:8px;
  right:8px;
  z-index:1000;
  padding:6px;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  font-size:20px;
  font-weight:bold;
}
#tytle {
  max-width: 80%;
  height: auto;
  z-index:1000;
  object-fit: contain;
}
.button-group{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-bottom:4px;
  margin-top: 10px;
}
.button-group button{
  flex:1;
  padding:4px 6px;
  cursor:pointer;
  border-radius:4px;
  border:1px solid #ccc;
  background:#fff;
  transition:0.2s;
}
.button-group button:hover{
  background:#eee;
}
.search-group {
  display:flex;
  gap:4px;
  margin-bottom:8px;
  margin-top: 0px;
}
.search-group input:focus {
  outline:none; 
  border-color:#4caf50; 
}
.search-group button:hover {
  background:#eee; 
}
/* タスクバー */
.taskbar {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  margin-top: 10px;
}

.taskbar-toggle {
  width: 100%;
  text-align: left;
  padding: 6px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
}

.taskbar-toggle:hover {
  background: #e0e0e0;
}

.taskbar-content {
  display: none;
  padding: 6px;
  gap: 8px;
}

.taskbar-content.active {
  display: block;
}

.title-style {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.title-style:hover {
  background: #e6f2fb;
}
.higashiyama-style {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.higashiyama-style:hover {
  background: #e6f2fb;
}
.map-botton {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.school-logo {
  height: 12px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 3px;
}
.main-logo {
  height: 60px !important;
  vertical-align: middle ;
  margin-top: -3px;
  margin-left: auto;
}
.mapbotton {
  display: inline-block;
  background: #0b78d1;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
}

#csvUploadSection{
  margin-top: 15px;
}
.overlay{
  margin-bottom: -3px;
}
#overlay-target,#overlay-layer {
  width: 200px;   /* 好きな幅に調整 */
  font-size: 14px; /* 文字サイズも小さめに */
}
.sidebar-section label {
  display: block;
  margin-top: 8px; /* 上に少し余白を入れると見やすい */
}

input[type="file"] {
  color: transparent; /* テキスト部分を透明にする */
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
/*メニューバー*/
.menu-group {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  margin-top: 10px;
}
.menu-group a {
  display: inline-block;
  padding: 6px 12px;
  white-space: nowrap;
}
.menu-toggle {
  width: 100%;
  text-align: left;
  padding: 6px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
}
.menu-toggle:hover {
  background: #e0e0e0;
}
.menu-content {
  display: none;
  padding: 6px;
  gap: 10px;
}
.menu-content.active {
  display: block;
}
.menu-content a {
  display: block;
  margin: 6px 0;
  padding: 8px 12px;
}
#sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
#sidebar {
  -ms-overflow-style: none;  /* IE, Edge */
  scrollbar-width: none;     /* Firefox */
}
#csvFileList {
  margin-top: 1px; /* タブの下に表示 */
  list-style: none;
  padding: 0;
}

#csvFileList li {
  cursor: pointer;
  padding: 5px;
}
#csvFileList li:hover {
  background-color: #f0f0f0;
}

.scrollable-input {
  flex: 1; /* 親要素のスペースを均等に埋める */
  overflow-x: auto; /* 横方向のスクロールを可能にする */
  white-space: nowrap; /* テキストが折り返されないようにする */
  padding-right: 2px; /* 少し余白を持たせる */
}
/* スクロールバーのデザインを隠す */
.scrollable-input::-webkit-scrollbar {
  height: 5px;
}

.scrollable-input::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.search-group input {
  min-width: 0; /* Flexboxのコンテナ内での幅の縮小を許可 */
}

@media (max-width: 700px) {
  #map-container {
    /* 1行2列の2画面レイアウトに変更 */
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr 1fr;
  }
}